<template lang="">
  <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频</el-breadcrumb-item>
      <el-breadcrumb-item>视频标签</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="key" clearable @clear="onClearSearch">
          </el-input>
        </el-col>
        <el-col :span="4">
        <el-button type="primary"  @click="addVideoLabel">添加标签</el-button>
        </el-col>
      </el-row>
      <el-tag
         v-for="(item) in videoLabel"
         :key ='item._id'
        closable
        type="success"
        :disable-transitions="false"
        @close="handleClose(item)">
       {{item.label}}
      </el-tag>

      <!-- 分页区域 -->
    </el-card>
    <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogVisible = false"
    ></el-dialog>
  </div>
</template>
<script>
import { getVideoLabel, removeVideoLabel, addVideoLabel } from '@/api/base.js'
export default {
  name: 'VideoLabel',
  data () {
    return {
      videoLabel: [],
      key: '',
      editDialogVisible: false
    }
  },
  created () {
    console.log(111)
    this.getVideoLable()
  },
  methods: {
    async getVideoLable () {
      const { data: res } = await getVideoLabel()
      this.videoLabel = res.data
      this.total = res.meta.msg
      console.log(res)
    },
    searchUser () {
      this.currentPage = 1
      this.getVideoLable()
    },
    handleSizeChange (index) {
    },
    handleCurrentChange (index) {
      this.currentPage = index
      this.getVideoLable()
    },
    onClearSearch () {
      this.key = ''
      this.currentPage = 1
      this.getVideoLable()
    },
    async showEditDialog (id) {
      // const { data: res } = await this.$http.get('users/' + id)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('查询用户信息失败！')
      // }
      // this.editUserForm = res.data
      this.editDialogVisible = true
    },
    async handleClose (item) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该视频标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await removeVideoLabel({ label: item.label })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('您没有权限删除！')
      this.videoLabel.splice(this.videoLabel.indexOf(item), 1)
      this.$message.success('删除标签成功！')
      this.getUserList()
    },
    async addVideoLabel () {
      const { data: res } = await addVideoLabel({ label: this.key })
      if (res.meta.status !== 200) return this.$message.error('您没有权限删除！')
      this.videoLabel.push({ label: this.key, _id: new Date() })
      this.$message.success('添加标签成功！')
      this.key = ''
      this.getUserList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
  margin-top: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-breadcrumb {
  margin-bottom: 15px;
}
</style>
